<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>奕报告—让校园服务更智慧/开放性的移动平台，跨业务数据整合</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
    <meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser">
    <meta name="keywords" content="奕报告、移动校园应用、高校大数据工具、智慧校园、移动校园、智慧课堂 、校园场景 、校园大数据、校园服务 、移动门户、大数据应用、校园大数据应用、智慧校园应用、移动校园应用、可快速上线、迭代快、轻应用、移动端全覆盖、微服务、挖掘分析、数据分析 、数据应用">
    <meta name="description" content="基于移动校园场景的大数据工具型轻应用，让校园服务更智慧/开放性移动平台、跨业务数据整合!">
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./static/css/bootstrap.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries&ndash;&gt;
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <link rel="stylesheet" type="text/css" href="./static/css/main.css">
    <script type="text/javascript" src="./static/js/jquery.min.js"></script>
    <script type="text/javascript" src="./static/js/jquery.form.min.js"></script>




</head>
<body class="join_us">
<div id="main">
    <nav role="navigation" class="navbar navbar-fixed-top ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="http://www.yibaogao.com/" class="navbar-brand"><img src="./images/logo.png" alt="ybg logo" class="navbar-logo"></a></div>
            <div id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li id="nav-index" class="active"><a href="#">首页</a></li>
                    <li id="nav-heart"><a href="#" data-toggle="dropdown" class="dropdown-toggle">用户心声</a></li>
                    <li id="nav-about"><a href="#" target="_blank">关于我们</a></li>
                    <li id="nav-join"><a href="#">加入我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <ul id="tabs" class="clearfix">
        <li class="action"><a href="#">教师</a></li>
        <li><a href="#">学生</a></li>
    </ul>
    <div class="tabs-con">
        <div class="form-teacher tab-li">
            <form role="form" id="apply-form-teacher">
                <div class="form-group">
                    <label for="userName">姓名<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="userName" placeholder="请输入您的姓名" name="userName" required>
                </div>
                <div class="form-group">
                    <label for="schoolName">所在学校<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="schoolName" placeholder="请输入所在学校" name="schoolName" required>
                </div>
                <div class="form-group">
                    <label for="department">所在部门<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="department" placeholder="请输入您的所在部门" name="department" required>
                </div>
                <div class="form-group">
                    <label for="mobile">联系电话<i class="start-red">*</i></label>
                    <input type="tel" class="form-control" id="mobile" placeholder="请输入您的联系电话" name="mobile" required>
                </div>
                <div class="form-group">
                    <label for="email">联系邮箱<i class="start-red">*</i></label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的联系邮箱" required>
                </div>
                <div class="form-group">
                    <label for="qq">QQ（选填）</label>
                    <input type="text" class="form-control" id="qq" placeholder="请输入您的QQ号码" name="qq">
                </div>
                <div class="form-group">
                    <label for="applyReason">申请理由<i class="start-red">*</i></label>
                    <textarea class="form-control" id="applyReason" name="applyReason" required></textarea>
                </div>
                <div class="form-group text-center">
                        <button type = "submit" class="btn" id="btn-teacher">确认申请开通</button>
                </div>
            </form>

        </div>
  <div class="form-school tab-li" style="display: none">
            <form role="form" id="apply-form-student" action="" method="post">
                <div class="form-group">
                    <label for="name_student">姓名<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="name_student" name="userName" placeholder="请输入您的姓名" required>
                </div>
                <div class="form-group">
                    <label for="id_student">学号<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="id_student" name="userId" placeholder="请输入您的学号" required>
                </div>
                <div class="form-group">
                    <label for="school_student">所在学校<i class="start-red">*</i></label>
                    <input type="text" class="form-control" id="school_student" name="schoolName" placeholder="请输入所在学校" required>
                </div>
                <div class="form-group">
                    <label for="tel_student">联系电话<i class="start-red">*</i></label>
                    <input type="tel" class="form-control" id="tel_student" name="mobile" placeholder="请输入您的联系电话" required>
                </div>
                <div class="form-group">
                    <label for="qq_student">QQ（选填）</label>
                    <input type="text" class="form-control" id="qq_student" name="qq" placeholder="请输入您的QQ号码">
                </div>
                <div class="form-group">
                    <label for="application_student">申请理由<i class="start-red">*</i></label>
                    <textarea class="form-control" id="application_student" name="applyReason" required></textarea>
                </div>
                <div class="form-group text-center">
                    <button type="submit" class="btn" id="btn-student">确认申请开通</button>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="/static/js/jquery.validate.js"></script>
<script src="/static/js/messages_zh.js"></script>

<script>
    $(function () {
        $("#apply-form-teacher").ajaxForm({
            type:'post',
            url:"official/school/officialWebsiteApply",
            clearForm:true,
            dataType:"jsonp",
            success:function(data){
                console.log(data);
                if(data.code == '0'){
                    alert("申请成功");
                    window.location.href="http://www.yibaogao.com/"
                }else{
                    alert("申请失败");
                    window.location.href="http://www.yibaogao.com/"
                }
            }
        });
        $("#apply-form-student").ajaxForm({
            type:'post',
            url:"official/school/officialWebsiteApply",
            clearForm:true,
            dataType:"jsonp",
            success:function(data){
                if(data.code == '0'){
                    alert("申请成功");
                    window.location.href="http://www.yibaogao.com/"
                }else{
                    alert("申请失败");
                    window.location.href="http://www.yibaogao.com/"
                }
            }
        });
        $("#tabs li").click(function () {
            $(this).addClass("action").siblings().removeClass("action");
            var index = $(this).index();
            if (index == 1) {
                $("#apply-form-student").validate({
                    rules: {
                        username: {
                            required: true,
                            stringCheck: true,
                            byteRangeLength: [3, 15]
                        },

                        tel_student: {
                            required: true,
                            isPhone: true
                        },
                        qq_student: {
                            required: false,
                            number: true
                        }
                    }
                });
                jQuery.validator.addMethod("isPhone", function (value, element) {
                    var length = value.length;
                    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
                    var tel = /^\d{3,4}-?\d{7,9}$/;
                    return this.optional(element) || (tel.test(value) || mobile.test(value));
                }, "请正确填写您的联系电话");
            }
            $(".tab-li").eq(index).css("display", "block").siblings().css("display", "none");
        });
        $.validator.setDefaults({
            submitHandler: function() {


            }
        });
            $("#apply-form-teacher").validate({
                rules: {
                    username: {
                        required: true,
                        stringCheck: true,
                        byteRangeLength: [3, 15]
                    },

                    tel: {
                        required: true,
                        isPhone: true
                    },
                    qq: {
                        required: false,
                        number: true
                    }
                }
            });
            jQuery.validator.addMethod("isPhone", function (value, element) {
                var length = value.length;
                var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
                var tel = /^\d{3,4}-?\d{7,9}$/;
                return this.optional(element) || (tel.test(value) || mobile.test(value));
            }, "请正确填写您的联系电话");
    });


</script>

</body>
</html>